import React, { useRef, useEffect } from 'react';
import * as echarts from 'echarts/core';
import { BarChart } from 'echarts/charts';
import { GridComponent, VisualMapComponent, TooltipComponent, TitleComponent } from 'echarts/components';
import { SVGRenderer, SvgChart } from '@wuba/react-native-echarts';
import { Dimensions } from 'react-native';
const { width, height } = Dimensions.get('window')

echarts.use([SVGRenderer, GridComponent, BarChart, VisualMapComponent, TooltipComponent, TitleComponent]);

export default function Bar(props) {
    const skiaRef = useRef(null);
    function formatNumber(num) {
        // 如果数值大于等于10000，除以10000，保留一位小数，加上w后缀
        if (num >= 10000) {
            return (num / 10000).toFixed(1) + 'w';
        }
        // 如果数值大于等于1000，除以1000，保留一位小数，加上k后缀
        else if (num >= 1000) {
            return (num / 1000).toFixed(1) + 'k';
        }
        // 否则，直接返回数值
        else {
            return num;
        }
    }
    useEffect(() => {
        const option = {
            title: {
                text: props.title || '',
                textStyle: {
                    fontSize: 15
                },
                show: false
            },
            xAxis: {
                type: 'category',
                data: props.labels,
                "axisLine": {
                    "show": false  //隐藏x轴线
                },
                "axisTick": {
                    "show": false //隐藏x轴刻度
                },
                axisLabel: {
                    rotate: 45,
                },
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    formatter: function (value, index) {
                        return formatNumber(value);
                    }
                },
                name: '单位（元）'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            grid: {
                top: 15,
                right: 0,
            },
            series: [
                {
                    data: props.series,
                    type: 'bar',
                    // showBackground: true,
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: '#e7e5fc' },
                            { offset: 0.5, color: '#887ef2' },
                            { offset: 1, color: '#887ef2' }
                        ]),
                        borderRadius: 5,
                    },
                    emphasis: {
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: '#8177e5' },
                                { offset: 0.7, color: '#8177e5' },
                                { offset: 1, color: '#ada6f6' }
                            ])
                        }
                    },
                }
            ]
        };
        let chart;
        if (skiaRef.current) {
            chart = echarts.init(skiaRef.current, 'light', {
                renderer: 'svg',
                width: width - 28,
                height: width - 28,
            });
            chart.setOption(option);
        }
        return () => chart?.dispose();
    }, []);

    // return <SkiaChart ref={skiaRef} />;
    return <SvgChart ref={skiaRef} />;
}